<template>
  <div class="feature-container">
    <h3>标注编辑
      <el-button type="primary" style="margin-left:10px;" @click="postPoints">提交信息</el-button>
    </h3>
    <div class="edit-container">
      <el-form ref="form" :model="form" label-width="80px" class="edit-form">
        <el-form-item label="当前zoom">
          <el-input :value="mapZoom" disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="所属类别">
          <el-input :value="getValue(editFeatureTab,'title')" disabled="disabled"></el-input>
        </el-form-item>
        <el-button type="danger" plain @click="deletePoint" style="margin-left:10px;">删除标注</el-button>
      </el-form>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="位置" name="first">
          <el-form ref="form" :model="form" label-width="80px" class="edit-form">
            <el-form-item label="最小层">
              <el-input-number v-model="form.minzoom" size="small" :min="1" :max="25"></el-input-number>
            </el-form-item>
            <el-form-item label="最大层">
              <el-input-number v-model="form.maxzoom" size="small" :min="1" :max="25"></el-input-number>
            </el-form-item>
            <el-form-item label="经度">
              <el-input :value="form.longitude" disabled="disabled"></el-input>
            </el-form-item>
            <el-form-item label="维度">
              <el-input :value="form.latitude" disabled="disabled"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="图片" name="second">
          <el-form :model="icon" label-width="120px" class="edit-form">
            <div class="image-context">
              <div class="image-container">
                <img v-for="item in featureIconList" :class="{'active':icon.landmarkIcon_id == item.id}" :key="item.id" :src="getIconUrl(item)" alt="" class="image-item" @click="changeActiveIcon(item)">
              </div>
            </div>
            <el-form-item label="图标宽度">
              <el-input v-model.number="icon.iconWidth"></el-input>
            </el-form-item>
            <el-form-item label="图标高度">
              <el-input v-model.number="icon.iconHeight"></el-input>
            </el-form-item>
            <el-form-item label="透明度(0-100)">
              <el-input v-model.number="icon.iconOpacity"></el-input>
            </el-form-item>
            <el-form-item label="旋转角度">
              <el-input v-model.number="icon.rotate"></el-input>
            </el-form-item>
            <el-button type="primary" @click="changeIcon" style="margin-left:10px">确 定</el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="点击" name="third">
          <el-form :model="form" label-width="60px" class="edit-form">
            <el-form-item label="内容">
              <el-input type="textarea" v-model="form.onclick" rows="6"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import utils from '@/assets/js/utils.js'
import { mapGetters } from 'vuex'
import env from '@/assets/env'
export default {
  data() {
    return {
      activeName: 'first',
      editIcon: false,
      form: this.initForm(),
      icon: {}
    }
  },
  computed: {
    ...mapGetters(['editFeature', 'iconList', 'editFeatureTab', 'mapZoom']),
    featureIconList() {
      return this.iconList.filter(
        t => t.landmarkCat_id == this.form.landmarkMark_type
      )
    }
  },
  methods: {
    getValue(item, property) {
      if (item == null) return null
      return item[property]
    },
    deletePoint() {
      if (!this.editFeature) {
        this.$message.error('请先选择一个坐标点')
        return
      }
      this.$confirm('确定删除点位?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // console.log(this.editFeature)
          this.form._del(this.form)
        })
        .catch(() => {
          // 取消
        })
    },
    initForm() {
      return {
        id: 0,
        minzoom: 1,
        maxzoom: 25,
        longitude: 0,
        latitude: 0,
        iconWidth: 80,
        iconHeight: 60,
        iconOpacity: 1,
        rotate: 0,
        landmarkIcon_id: 1,
        landmarkMark_type: 1,
        onclick: ''
      }
    },
    getForm(feature) {
      return {
        ...feature
      }
    },
    openIconWindow() {
      if (!this.editFeature) {
        this.$message.error('请先选择一个坐标点')
        return
      }
      this.editIcon = true
    },
    changeIcon() {
      if (this.editFeature != null) {
        this.form = {
          ...this.form,
          ...this.icon,
          iconOpacity: this.icon.iconOpacity / 100,
          width: this.icon.iconWidth,
          height: this.icon.iconHeight
        }
        this.editIcon = false
        this.form._update(this.form)
      } else {
        this.$message.error('请先选择一个坐标点')
      }
    },
    getIconUrl(icon) {
      return env.FILE_URL + icon.normal
    },
    changeActiveIcon(icon) {
      this.icon.landmarkIcon_id = icon.id
    },
    // 提交地图点位
    postPoints() {
      let points = window.pointList
      let features = points.map(t => {
        let data = t._data
        let feature = utils.getFeature(data)
        return feature
      })
      console.log(JSON.stringify(features), '提交')
      // this.$http
      //   .postUrl('api/landmarkMarks?landmarkMap_id=' + utils.getMarkMapId(), {
      //     json: JSON.stringify(features)
      //   })
      //   .then(rst => {
      //     if (rst.code == 200) {
      //       this.$message.success(rst.msg)
      //     } else {
      //       this.$message.error(rst.msg)
      //     }
      //   })

      // 见了鬼了,axios就是报跨域问题...
      const self = this
      $.ajax({
        type: 'POST',
        url:
          env.URL + 'api/landmarkMarks?landmarkMap_id=' + utils.getMarkMapId(),
        data: { json: JSON.stringify(features) },
        success(rst) {
          if (rst.code == 200) {
            self.$message.success(rst.msg)
          } else {
            self.$message.error(rst.msg)
          }
        },
        error(x, t, e) {
          console.warn(x)
        }
      })
    },
    handleClick(tab, event) {
      // console.log(tab, event)
      if (tab.index == 1) {
        this.editIcon = true
      } else {
        this.editIcon = false
      }
    }
  },
  watch: {
    editFeature(val) {
      if (val != null) {
        this.form = this.getForm(window._editPoint._data)
        // let feature = utils.getFeature(val)
        // console.log(JSON.stringify(feature))
      }
      this.activeName = 'first'
      this.editIcon = false
    },
    editIcon(val) {
      if (val) {
        this.icon = {
          iconWidth: this.form.iconWidth,
          iconHeight: this.form.iconHeight,
          landmarkIcon_id: this.form.landmarkIcon_id,
          iconOpacity: ~~((this.form.iconOpacity || 1) * 100),
          rotate: this.form.rotate || 0
        }
      }
    },
    'form.maxzoom'(val) {
      if (window._editPoint) {
        window._editPoint._data.maxzoom = val

        //  console.log(window._editPoint._data)
      }
    },
    'form.minzoom'(val) {
      if (window._editPoint) {
        window._editPoint._data.minzoom = val
        // console.log(window._editPoint._data)
      }
    },
    'form.onclick'(val) {
      if (window._editPoint) {
        window._editPoint._data.onclick = val
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.feature-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  h3 {
    flex-shrink: 0;
  }
  .edit-container {
    height: 100vh;
    width: 100%;
  }
  .edit-form {
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
.image-context {
  width: 100%;
  // height: 150px;
  max-height: 150px;
  margin-bottom: 10px;
  flex-shrink: 0;
  overflow: auto;
  .image-container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    align-items: center;
    .image-item {
      margin-left: 10px;
      padding: 10px;
      height: 60px;
      border: 1px solid transparent;
      box-sizing: border-box;
      &.active {
        border: 1px solid orange;
      }
    }
  }
}
</style>
